<template>
  <div class = "active-alert" v-echo-page page-name="alert-log">
    <div class = "alert-log-head">
      <div class = "alert-log--title"> LOGBOOK </div>
      <div class = "alert-log-transceiver"> &lt; {{transceiver}} &gt; </div>
      <div class = "alert-log-range"> RANGE:{{range}} </div>
      <div class = "alert-log-indicator">
        <img id = "indicatorImg" src = "../assets/indicator.png" >
        {{indicator.value.toUpperCase()}}
      </div>
    </div>

    <div class = "alert-log-body">
      <div class = "alert-title">
        <span class = "title-name"> Active Alert </span>
        <span class = "alert-num"> &lt; {{CurrentPage}}/{{allPage}} &gt; </span>
      </div>
      <div class = "alert-table">
        <table cellspacing="0">
          <tr class = "table-title">
            <td class = "status"> status </td>
            <td class = "alert"> Alert </td>
            <td class = "utc"> UTC </td>
          </tr>
        </table>

        <table cellspacing="0" v-for = "i in alertLog">
          <tr :class = "$index % 2 == 0 ? 'index1':'index2'"
              v-show = "($index >= (currentPage - 1) * 5) && ($index < currentPage * 5)">
            <td class = "status">
              <img src = "../assets/AlarmIcon.png" v-if = "i.alertId === 230">
            </td>
            <td class = "alert"> {{ i.alertId | alertText }} </td>
            <td class = "utc">
              <div> {{i.time}} </div>
              <div> {{i.day}} </div>
            </td>
          </tr>
        </table>
      </div>

      <div class = "alert-log-echo-disp">
        <div class = "out-put">
          <img src = "../assets/arrow1.png" width = 15>
          <div class = "out-put-name">
            <div style = "color: #368BB8"> FORE </div>
            <div class = "frequence"> {{frequence}}kHz </div>
          </div>
          <img src = "../assets/arrow2.png" width = 15>
        </div>
        <div class = "alert-log-draught">
          <span>DRAUGHT: {{draught}}m </span>
        </div>
        <div class = "alert-log-depth">
          <span class = "depthVal"> {{depth}}</span>
          m
        </div>
      </div>
    </div>

    <div class = "tail">
      <div id = "tip">
        <div id = "description"> {{descrip}} </div>
      </div>
      <div class = "log-localtime">
        <span>LOCAL {{time}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  import EchoTool from '../utils/echo-tool'
  import EchoMenu from '../utils/echo-menu'
  import AlertData from '../utils/echo-alert-data'

  let _sounder = EchoMenu.getMenuItems('menu/Sounder')

  export default {
    data () {
      return {
        alertLog: AlertData.alertLog,
        echoTool: EchoTool,
        transceiver: 1,
        range: 'AUTO',
        frequence: 50,
        indicator: _sounder[0],
        currentPage: 1
      }
    },
    computed: {
      draught: function () {
        return '0.0'
      },
      depth: function () {
        let tmp = this.echoTool.depthRandom
        tmp = tmp - parseInt(tmp)
        if (tmp === 0) {
          return this.echoTool.depthRandom + '.0'
        }
        return this.echoTool.depthRandom
      },
      time: function () {
        return EchoTool.getLocalTime()
      },
      allPage: function () {
        let len = this.alertLog.length
        len = len / 5
        len += 1
        if (len < 10) {
          return '0' + len
        }
        return len
      },
      CurrentPage: function () {
        if (this.currentPage < 10) {
          return '0' + this.currentPage
        }
        return this.currentPage
      }
    },
    [EchoKey.DISP] (evt) {
      this.$echo.routeTo('disp')
    }
  }
</script>

<style lang = "less">
  .alert-log-head {
    font-size: 20px;
    color: white;
    text-align: left;

    .alert-log--title {
      margin: 5px;
      text-align: center;
      background-color: blue;
      width: 100px;
      display: inline-block;
    }

    .alert-log-transceiver {
      display: inline-block;
      position: relative;
      left: 100px;
    }

    .alert-log-range {
      display: inline-block;
      position: relative;
      left: 300px;
    }

    .alert-log-indicator {
      border: 1px solid white;
      display: inline-block;
      position: relative;
      left: 450px;
    }
  }

  .alert-log-body {
    border: 1px solid white;

    .alert-title {
      background-color: #334997;
      border: 1px solid white;
      height: 30px;
      font-size: 25px;
      text-align: left;

      .title-name {
        color: white;
      }

      .alert-num {
        color: white;
        position: relative;
        left: 600px;
      }
    }

    .alert-table {
      height: 340px;
      font-size: 25px;

      .status {
        color: white;
        width: 200px;
        border-right: 1px solid white;
      }

      .alert {
        color: white;
        width: 550px;
        border-right: 1px solid white;
      }

      .utc {
        color: white;
        width: 199px;
        border-right: 1px solid white;
      }

      .index1 {
        font-size: 25px;
        background-color: black;
      }

      .index2 {
        font-size: 25px;
        background-color: #1D1D1B;
      }
    }

    .alert-log-echo-disp {
      border: 1px solid white;
      height: 270px;

      .alert-log-draught {
        font-size: 40px;
        text-align: right;
        color: white;
      }

      .alert-log-depth {
        color: white;
        font-size: 40px;

        .depthVal {
          font-size: 120px;
        }
      }
    }
  }

  .tail {
    .log-localtime {
      color: white;
    }
  }
</style>
